<template>
  <div class="content">
    <div
      class="tip info"
    >安全评分（SIS）是一种基于该部位消防用水、日常用电、巡查隐藏以及自然气象等方面数据形成的评估模型。安全评分（SIS）满分为100分，每产生一个隐患扣1分。分数越高，表明该部位隐患越少，安全情况越好</div>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="8">
        <Card>
          <p slot="title">
            <span>安全评估得分</span>
          </p>
          <div class="chart" id="chart-safe-score"></div>
          <Spin v-if="loading.score" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="8">
        <Card>
          <p slot="title">
            <span>告警分布情况</span>
          </p>
          <div class="chart" id="chart-dl-danger-classify"></div>
          <Spin v-if="loading.classify" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="8">
        <Card>
          <p slot="title">
            <span>所在地气象情况</span>
          </p>
          <CellGroup>
            <Cell :title="weather.updateInfo"></Cell>
            <Cell title="当前气温" :extra="weather.temperature"></Cell>
            <Cell title="当前湿度" :extra="weather.humidity"></Cell>
            <Cell title="当前风力" :extra="weather.windspeed"></Cell>
            <Cell title="当前PM2.5" :extra="weather.pm25"></Cell>
            <Cell title="当前PM10" :extra="weather.pm10"></Cell>
          </CellGroup>
          <Spin v-if="loading.weather" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="12">
        <Card>
          <p slot="title">
            <span>用水告警列表</span>
          </p>
          <div class="tableScroller">
            <Table :columns="tableColumns" :data="TableData.water"></Table>
          </div>

          <Spin v-if="loading.waterTable" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="12">
        <Card>
          <p slot="title">
            <span>用电告警列表</span>
          </p>
          <div class="tableScroller">
            <Table :columns="tableColumns" :data="TableData.electric"></Table>
          </div>

          <Spin v-if="loading.electricTable" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="12">
        <Card>
          <p slot="title">
            <span>告警主机报警</span>
          </p>
          <div class="tableScroller">
            <Table :columns="tableColumns" :data="TableData.host"></Table>
          </div>

          <Spin v-if="loading.host" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="12">
        <Card>
          <p slot="title">
            <span>人工上报隐患</span>
          </p>
          <div class="tableScroller">
            <Table :columns="tableColumns" :data="TableData.manual"></Table>
          </div>

          <Spin v-if="loading.manual" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      comID: null,
      comName: null,
      districtName: null,
      score: 0,
      date: this.dateShift(0) + " 23:59:59",
      weather: {
        updateInfo: null,
        temperature: null,
        windspeed: null,
        humidity: null,
        pm25: null,
        pm10: null
      },
      PageCount: {
        water: 0,
        electric: 0,
        host: 0,
        manual: 0
      },
      TableData: {
        water: [],
        electric: [],
        host: [],
        manual: []
      },
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "隐患内容",
          key: "dangerContent",
          align: "center"
        },
        {
          title: "隐患产生时间",
          key: "dangerTime",
          align: "center"
        },
        {
          title: "扣分",
          key: "scoreMinus",
          align: "center",
          width: 80
        }
      ],
      option: {
        score: null,
        classify: null
      },
      chartInstance: {
        //暂时不用
        score: null,
        classify: null
      },
      stat: {
        electric: 0,
        water: 0,
        host: 0,
        manual: 0
      },
      requestFlag: 0,
      loading: {
        score: false,
        classify: false,
        weather: false,
        waterTable: false,
        electricTable: false,
        hostTable: false,
        manualTable: false
      }
    };
  },
  props: {
    modalData: String
  },
  watch: {
    modalData: {
      handler(newVal, oldVal) {
        if (newVal.comID !== oldVal.comID) {
          this.comID = newVal.comID;
          this.comName = newVal.comName;
          this.districtName = newVal.districtName
          this.requestFlag = 0;
          this.query();
        }
      },
      deep: true
    }
  },
  methods: {
    query(newVal) {
      console.log(newVal);
      this.comID = newVal.comID;
      this.comName = newVal.comName;
      this.districtName = newVal.countryName
      this.requestFlag = 0;

      this.renderWeather()
      this.renderWaterTable();
      this.renderElectricTable();
      this.renderHostTable();
      this.renderManualTable();
    },
    renderScore() {
      this.loading.score = true;
      let params = {
        MC: this.comName,
        indexDate: this.date
      };
      this.option.score = {
        title: {
          text: "0%",
          x: "center",
          y: "center",
          textStyle: { fontWeight: "normal", color: "#0580f2", fontSize: "42" }
        },
        color: ["rgba(176, 212, 251, 1)"],
        legend: { show: false },
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: true,
            radius: ["60%", "76%"],
            itemStyle: {
              normal: { label: { show: false }, labelLine: { show: false } }
            },
            hoverAnimation: false,
            data: [
              {
                value: 80,
                name: "01",
                itemStyle: {
                  normal: {
                    color: {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00cefc" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#367bec" // 100% 处的颜色
                        }
                      ]
                    },
                    label: { show: false },
                    labelLine: { show: false }
                  }
                }
              },
              { name: "02", value: 20 }
            ]
          }
        ]
      };
      axios
        .get(this.URLHEAD_TA + "GetGJDetaileNew", { params: params })
        .then(res => {
          let json = res.data;
          let score =
            100 -
              this.stat.electric -
              this.stat.water -
              this.stat.host -
              this.stat.manual <
            0
              ? 0
              : 100 -
                this.stat.electric -
                this.stat.water -
                this.stat.host -
                this.stat.manual;
          this.option.score.title.text = score;
          this.option.score.series[0].data[0].value = score;
          this.option.score.series[0].data[1].value = 100 - score;
          this.$Crender("chart-safe-score", this.option.score);
          this.loading.score = false;
        });
    },
    renderClassify() {
      this.option.classify = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: [],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: this.COLORS,
        series: [
          {
            name: "隐患类型分布",
            type: "pie",
            radius: ["45%", "55%"],
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:{c}次"
              }
            }
          }
        ]
      };
      this.option.classify.legend.data = [
        "用电告警",
        "用水告警",
        "告警主机",
        "人工上报"
      ];
      this.option.classify.series[0].data = [
        { name: "用电告警", value: this.stat.electric },
        { name: "用水告警", value: this.stat.water },
        { name: "告警主机", value: this.stat.host },
        { name: "人工上报", value: this.stat.manual }
      ];
      this.$Crender("chart-dl-danger-classify", this.option.classify);
      this.renderScore()
      this.loading.classify = false;
    },
    requestRenderClassify() {
      this.loading.classify = true;
      this.requestFlag++;
      if (this.requestFlag === 4) {
        this.renderClassify();
      }
    },
    renderWeather() {
      this.loading.weather = true;
      let counter = 0;
      let params = {
        countyName:this.districtName,
        date:this.dateShift(0)
      };
      
      axios
        .get(this.URLHEAD_TA + 'QueryWeather', { params: params })
        .then(res => {
          let json = res.data;
          this.weather.updateInfo = `最后一次更新于${json.Data[0].loc}`;
          this.weather.temperature = `${json.Data[0].tmp}°C`;
          this.weather.windspeed = `${json.Data[0].wind_dir}${json.Data[0].wind_sc}级`;
          this.weather.humidity = json.Data[0].hum + '%';
          this.weather.pm10 = json.Data[0].PM10
          this.weather.pm25 = json.Data[0].PM25
          this.loading.weather = false;
        });
    },
    renderWaterTable() {
      this.loading.water = true;
      let params = {
        ComID: this.comID,
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59",
        type: "用水发生异常"
      };
      axios
        .get(this.URLHEAD_DVS + "IReportAnalysis", { params: params })
        .then(res => {
          let json = res.data;
          this.TableData.water = json.Data[0].data.map((o, i) => {
            return {
              index: i + 1,
              dangerContent: o.AlarmType,
              dangerTime: o.AlarmTime,
              scoreMinus: -1
            };
          });
          this.stat.water = json.Data[0].data.length;
          this.requestRenderClassify();
          this.loading.water = false;
        });
    },
    renderElectricTable() {
      this.loading.electric = true;
      let params = {
        ComID: this.comID,
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59",
        type: "用电发生异常"
      };
      axios
        .get(this.URLHEAD_DVS + "IReportAnalysis", { params: params })
        .then(res => {
          let json = res.data;
          this.TableData.electric = json.Data[0].data.map((o, i) => {
            return {
              index: i + 1,
              dangerContent: o.AlarmType,
              dangerTime: o.AlarmTime,
              scoreMinus: -1
            };
          });
          this.stat.electric = json.Data[0].data.length;
          this.requestRenderClassify();
          this.loading.electric = false;
        });
    },
    renderHostTable() {
      this.loading.host = true;
      let params = {
        ComID: this.comID,
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59",
        type: "报警主机"
      };
      axios
        .get(this.URLHEAD_DVS + "IReportAnalysis", { params: params })
        .then(res => {
          let json = res.data;
          this.TableData.host = json.Data[0].data.map((o, i) => {
            return {
              index: i + 1,
              dangerContent: o.AlarmType,
              dangerTime: o.AlarmTime,
              scoreMinus: -1
            };
          });
          this.stat.host = json.Data[0].data.length;
          this.requestRenderClassify();
          this.loading.host = false;
        });
    },
    renderManualTable() {
      this.loading.manual = true;
      let params = {
        ComID: this.comID,
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59",
        type: "人工上报隐患"
      };
      axios
        .get(this.URLHEAD_DVS + "IReportAnalysis", { params: params })
        .then(res => {
          let json = res.data;
          this.TableData.manual = json.Data[0].data.map((o, i) => {
            return {
              index: i + 1,
              dangerContent: o.AlarmType,
              dangerTime: o.AlarmTime,
              scoreMinus: -1
            };
          });
          this.stat.manual = json.Data[0].data.length;
          this.requestRenderClassify();
          this.loading.manual = false;
        });
    }
  },
  created() {}
};
</script>

<style lang="" scoped>
.content {
  height: 650px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tableScroller {
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}
.chart {
  height: 254px;
}
.tip.info {
  background: #eee;
  padding: 10px 20px;
  margin: 0 19px 19px 19px;
  border-radius: 5px;
  border: 1px #dedede solid;
  color: #666;
}

</style>